<template>
  <div>
    <!-- 头部tab -->
    <!-- <div class="top_tab">
      <div class="left" @click="back()">
        <img  src="../assets/order_center/shangs.png">
      </div>
      <span>鸿包惠</span>
      <div class="right">
      </div>
    </div> -->
    <div class="note">
			<div class="box">
				<span>鸿包余额</span>
				<div class="num">
					<span>{{money | moneyFormat}}</span>
				</div>
			</div>
			<div class="info">
				<!-- <span class="cate" @click="bindingcarClick()">绑定银行卡</span> -->
				<span class="cate" @click="put_inClick()">申请还款</span>
			</div>
		</div>
		<div class="center">
			<yd-tab active-color=#ed6b2f class="ka" :callback="oncallback">
        <yd-tab-panel label="鸿包余额明细">
					 <div class="bar" v-for="(item,index) in detailList" :key="index">
							<div class="time">
								<span>{{  (item.created_at.split(' '))[0].split("-")[0]   }}</span> 
								<span>{{  (item.created_at.split(' '))[0].split("-")[1]   }}-{{  (item.created_at.split(' '))[0].split("-")[2]   }}</span> 
							</div>
							<div class="pic">
								<img  src="../assets/debenture/hongbao.png">
							</div>
							<div class="right">
								<span class="red">{{item.price | moneyFormat}}</span>
								<span>{{item.name}} </span>
							</div>
						</div>
						<!-- 无数据 -->
						<div class="without" v-if="detailList==null">
							<img src="../assets/order_center/kongbai.png" alt="">
							<span>暂无数据~</span> 
						</div>
				</yd-tab-panel>
        <yd-tab-panel label="申请记录">
						<div class="bar" v-for="(item,index) in detailLists" :key="index">
							<div class="time">
								<span>{{  (item.created_at.split(' '))[0].split("-")[0]   }}</span> 
								<span>{{  (item.created_at.split(' '))[0].split("-")[1]   }}-{{  (item.created_at.split(' '))[0].split("-")[2]   }}</span> 
							</div>
							<div class="pic">
								<img  src="../assets/debenture/hongbao.png">
							</div>
							<div class="right">
								<span class="red">{{item.price | moneyFormat}}</span>
								<span>{{item.created_at}} {{item.content}}</span>
							</div>
							<span style="color:#D91FDB;" v-if="item.status == 0">审核中</span>
							<span style="color:#1B14C1;" v-if="item.status == 1">审核通过</span>
							<span style="color:#BC2A2F;" v-if="item.status == 2">审核失败</span>
							<span style="color:#289040;" v-if="item.status == 3">已打款</span>
						</div>
			  		<!-- 无数据 -->
						<div class="without" v-if="detailLists==null||detailLists=='null'||detailLists.length == 0">
							<img src="../assets/order_center/kongbai.png" alt="">
							<span>暂无数据~</span> 
						</div>
				</yd-tab-panel>
      </yd-tab>	
		</div>
	</div>
</template>

<script>
import Vue from 'vue';
import {Tab, TabPanel} from 'vue-ydui/dist/lib.rem/tab';
Vue.component(Tab.name, Tab);
Vue.component(TabPanel.name, TabPanel);
export default {
  name: 'entrust',
  data () {
    return {
			user_from:'',
			level:'',
			detailList:[],
			detailLists:[]
    }
  },
  methods:{
    back: function() {
      this.$router.go(-1);
		},
		put_inClick:function(){
			// if(this.level <= 0 && this.user_from <1 ){
      //   this.$dialog.toast({ mes: 'VIP会员才可以申请还款,请先申请VIP会员' });
      //   return
			// }
			//   var date = new Date();
			// 	var day = date.getDate();
			// 	if (day < 10) {
			// 			day = "0" + day;
			// 	} 
			// if(day<20||day>25){
      //   this.$dialog.toast({ mes: '只有每月的20-25号才可以申请还款哦!' });
			// 	return
			// }

			let self = this;
      let url = "/api/login/check_status";
      self.httpPost(
        url,
        {
          user_id: this.myid,
          token: this.token
        },
        function(res) {
          if (res.data == 1) {
						self.$dialog.toast({
										mes: "您的会员认证正在审核中，请等待申请结束！",
										timeout: 1500
						});
          }
          if (res.data == 2) {
						self.$router.push("put_in");
          }
				  if (res.data == 3) {
            self.$router.push("./resubmit");
          }
          if (res.data == 9) {
            self.$router.push("./personal");
          }
        }
      );
		},
 
		bindingcarClick:function(){
      this.$router.push("bindingcar");
		}, 
    //明细
    detail1:function(){
      let self = this;
      let url = "/api/selloff";
			self.httpPost(url,{user_id:this.myid,token:this.token,p:1,psize:999},function(res) {
				if (res.code === 200) {
          self.detailList=res.data;
				}
      })
		},
		   //获取用户资料
    detail: function() {
      let self = this;
      let url = "/api/login/detail";
      self.httpPost(url, { user_id: this.myid, token: this.token }, function(
        res
      ) {
        if (res.code === 200) { 
					self.user_from = res.data.user_from=='null'?res.data.user_from:0;
					self.level = res.data.level
          console.log(self.user_from ,self.level ) 
        }  
      });
		},
			 //切换
    oncallback:function(l) { 
			 console.log("sssss", l); 
			 if(l == "鸿包余额明细"){
				 this.detail1()
			 }else{
				 this.detail22()
			 } 
		}, 
		//申请记录
		detail22(){
			let self = this;
      let url = "/api/selloffcheck_index";
			self.httpPost(url,{user_id:this.myid,token:this.token,p:1,psize:999},function(res) {
				if (res.code === 200) {
          self.detailLists=res.data.data;
				}
      })
		}
	},
	created(){
    document.title = "鸿包余额";
    this.token = localStorage.getItem('mytoken');
		this.myid = localStorage.getItem('myid');
		this.money = this.$route.query.money;
		this.detail1()
		this.detail()
  }
}
</script>


<style scoped>
.top_tab{
  width:100%;
  padding:.2rem .3rem;
  background: #FFF;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: .01rem .01rem .06rem #ddd;
}
.top_tab span{
  color:#333;
  font-size: .36rem;
	margin-left: .5rem;
}
.top_tab .right{
	width: 1rem;
	display: flex;
	justify-content: space-between;
}
.top_tab  img{
  width:.43rem;
}
.note{
  width:100%;
  height:4.15rem;
  position: relative;
  padding: .3rem 0;
	background: #e63f3f;
}
.note .box{
	height:1.13rem;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	margin-top: 1.2rem;
}
.note .box span{
	font-size: .28rem;
	color:#FFF;
}
.note .box .num{
	display: flex;
	justify-content: center;
	align-items: center;
}
.note .box .num span{
	font-size: .40rem;
	color: #ffff00;
}
.note .info{
	width:100%;
	display: flex;
	justify-content: center;
	padding: 0 .3rem;
	margin-top: .75rem;
}
.note .info .cate{
	color: #FFF; 
	padding: .1rem .20rem;
  border-radius:5px; 
  font-size: .28rem;
  text-align: center;
	border:1px solid #FFF;
}
.center{
	width:100%;
	background: #FFF;
	margin-top: .1rem;
}
.center .bar{
	width: 100%;
	background: #FFF;
	display: flex;
	align-items: center;
	padding: .2rem;
	border-bottom: 1px solid #dfdfdf;
	position: relative;
}
.bar>span{
	position: absolute;
	top: .2rem;
	right: .2rem;
}
.center .bar .time{
	display: flex;
	flex-direction: column;
	align-items: center;
}
.center .bar .time span{
	font-size: .20rem;
	color: #707070;
}
.center .bar .pic img{
	width:.5rem;
	margin-left: .1rem;
}
.center .bar .right{
	display: flex;
	flex-direction: column;
	margin-left: .3rem;
}
.center .bar .right span{
	font-size: .20rem;
	color: #c6c2c2;
}
.center .bar .right .red{
	color:#ff0000;
}
/* 无数据 */
.without{
  width:100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 30%;
}
.without img{
  width: 3.23rem;
  height:3.16rem;
}
.without span:nth-child(2){
  font-size: .36rem;
  color:#707070;
  margin-top: .43rem;
}
.without span:nth-child(3){
  font-size: .30rem;
  color:#b7b7b7;
  margin-top: .3rem;
}
.without .cate{
  color: #FFF; 
	width:2.27rem;
	height:.80rem;
  line-height: .80rem;
  border-radius:10px; 
  font-size: .30rem;
  text-align: center;
	background: #e53a30;
	border:none;
  margin-top: .96rem;
}
</style>

